
body, html {
  height : 100%;
}

html {
  font-size          : 14px;
  font-family        : -apple-system,Helvetica Neue,Helvetica,Arial,sans-serif;
  line-height        : 1.5;
  -webkit-box-sizing : border-box;
  -moz-box-sizing    : border-box;
  -ms-box-sizing     : border-box;
  -o-box-sizing      : border-box;
  box-sizing         : border-box;
}

body {
  -webkit-box-sizing : border-box;
  -moz-box-sizing    : border-box;
  -ms-box-sizing     : border-box;
  -o-box-sizing      : border-box;
  box-sizing         : border-box;
}

*, *::before, *::after {
  -webkit-box-sizing : inherit;
  -moz-box-sizing    : inherit;
  -ms-box-sizing     : inherit;
  -o-box-sizing      : inherit;
  box-sizing         : inherit;
}

.bg-black {
  background-color : #121212;
}

.bg-blue900 {
  background-color : #e6f8ff;
}

.bg-dark {
  background-color : #121212;
}

.bg-gray150 {
  background-color : #242424;
}

.bg-gray650 {
  background-color : #a8a8a8;
}

.bg-gray850 {
  background-color : #d8d8d8;
}

.bg-gray900 {
  background-color : #f6f6f6;
}

.bg-green {
  background-color : #79f2b0;
}

.bg-inherit {
  background-color : inherit;
}

.bg-purple {
  background-color : #974dff;
}

.bg-purple150 {
  background-color : #291a40;
}

.bg-red {
  background-color : #eb1c26;
}

.bg-white {
  background-color : #fff;
}

.bg-yellow {
  background-color : #fff080;
}

.border-gray-650 {
  border-top-color    : #a8a8a8;
  border-right-color  : #a8a8a8;
  border-bottom-color : #a8a8a8;
  border-left-color   : #a8a8a8;
}

.border-gray-800 {
  border-top-color    : #ccc;
  border-right-color  : #ccc;
  border-bottom-color : #ccc;
  border-left-color   : #ccc;
}

.border-gray-850 {
  border-top-color    : #d8d8d8;
  border-right-color  : #d8d8d8;
  border-bottom-color : #d8d8d8;
  border-left-color   : #d8d8d8;
}

.border-gray-900 {
  border-top-color    : #f6f6f6;
  border-right-color  : #f6f6f6;
  border-bottom-color : #f6f6f6;
  border-left-color   : #f6f6f6;
}

.fg-black {
  color : #121212;
}

.fg-blue {
  color : #4cccff;
}

.fg-gray300 {
  color : #555555;
}

.fg-gray400 {
  color : #666666;
}

.fg-gray500 {
  color : #808080;
}

.fg-gray650 {
  color : #a8a8a8;
}

.fg-gray850 {
  color : #d8d8d8;
}

.fg-green {
  color : #79f2b0;
}

.fg-purple {
  color : #974dff;
}

.fg-red {
  color : #eb1c26;
}

.fg-yellow {
  color : #fff080;
}

.fg-white {
  color : #fff;
}

a:link.pf-link-black {
  color : #121212;
}

a:visited.pf-link-black {
  color : #121212;
}

a:link.pf-link-gray650 {
  color : #a8a8a8;
}

a:visited.pf-link-gray650 {
  color : #a8a8a8;
}

a:link.pf-link-green {
  color : #79f2b0;
}

a:visited.pf-link-green {
  color : #79f2b0;
}

a:link.pf-link-purple {
  color : #974dff;
}

a:visited.pf-link-purple {
  color : #974dff;
}

a:link.pf-link-red {
  color : #eb1c26;
}

a:visited.pf-link-red {
  color : #eb1c26;
}

a:link.pf-link-white {
  color : #fff;
}

a:visited.pf-link-white {
  color : #fff;
}

a:link.pf-link-yellow {
  color : #fff080;
}

a:visited.pf-link-yellow {
  color : #fff080;
}

.code {
  background-color : rgba(0,0,0,0.02);
  color            : #24292e;
  font-family      : ui-monospace,monospace;
}

code {
  font-family : ui-monospace,monospace;
}

pre {
  font-family : ui-monospace,monospace;
}

.inline-code {
  color                      : #24292e;
  font-family                : ui-monospace,monospace;
  padding-top                : 1px;
  padding-bottom             : 1px;
  padding-right              : 5px;
  padding-left               : 5px;
  border-top-left-radius     : 3px;
  border-top-right-radius    : 3px;
  border-bottom-right-radius : 3px;
  border-bottom-left-radius  : 3px;
}

.opacity-25 {
  opacity : 0.25;
}

.opacity-50 {
  opacity : 0.5;
}

.opacity-75 {
  opacity : 0.75;
}

a, a:link, a:visited {
  color           : #121212;
  text-decoration : none;
}

a:hover, a:active {
  text-decoration : underline;
}

a.underline-link {
  text-decoration : underline;
}

.body-leading {
  font-size : 1.1875rem;
}

h1, h2, h3, h4, h5, h6, p, ul, ol {
  margin-top    : 0.5rem;
  margin-bottom : 0.5rem;
  margin-right  : 0;
  margin-left   : 0;
}

hr {
  border-top-color    : transparent;
  border-right-color  : transparent;
  border-bottom-color : transparent;
  border-left-color   : transparent;
  border-top-style    : none;
  border-right-style  : none;
  border-bottom-style : none;
  border-left-style   : none;
  border-top-width    : 0;
  border-right-width  : 0;
  border-bottom-width : 0;
  border-left-width   : 0;
}

.pf-divider {
  border-top-color : #ddd;
  height           : 0px;
}

.pf-navbar a, .pf-navbar a:link {
  color : #fff;
}

.btn-normal:hover {
  -webkit-box-shadow : inset 0 0 0 20rem rgba(0,0,0,0.1);
  -moz-box-shadow    : inset 0 0 0 20rem rgba(0,0,0,0.1);
  -ms-box-shadow     : inset 0 0 0 20rem rgba(0,0,0,0.1);
  -o-box-shadow      : inset 0 0 0 20rem rgba(0,0,0,0.1);
  box-shadow         : inset 0 0 0 20rem rgba(0,0,0,0.1);
}

a:active.btn-normal {
  -webkit-box-shadow : inset 0 0 0 20rem rgba(0,0,0,0.3);
  -moz-box-shadow    : inset 0 0 0 20rem rgba(0,0,0,0.3);
  -ms-box-shadow     : inset 0 0 0 20rem rgba(0,0,0,0.3);
  -o-box-shadow      : inset 0 0 0 20rem rgba(0,0,0,0.3);
  box-shadow         : inset 0 0 0 20rem rgba(0,0,0,0.3);
}

a:link.btn-normal {
  text-decoration : none;
}

.btn-normal {
  padding-top    : 0.75rem;
  padding-bottom : 0.75rem;
}

.btn-outline:hover {
  text-decoration : none !important;
}

.btn-outline {
  text-decoration : underline !important;
}

.vid-time-link {
  padding-top : 0.25rem;
}

.blue-gradient {
  background : rgba(128,219,255,0.85);
  background : -moz-linear-gradient(top, rgba(128,219,255,0.85) 0%, rgba(128,219,255,0) 100%);
  background : -webkit-gradient(left top, left bottom, color-stop(0%, rgba(128,219,255,0.85)), color-stop(100%, rgba(128,219,255,0)));
  background : -webkit-linear-gradient(top, rgba(128,219,255,0.85) 0%, rgba(128,219,255,0) 100%);
  background : -o-linear-gradient(top, rgba(128,219,255,0.85) 0%, rgba(128,219,255,0) 100%);
  background : -ms-linear-gradient(top, rgba(128,219,255,0.85) 0%, rgba(128,219,255,0) 100%);
  background : linear-gradient(to bottom, rgba(128,219,255,0.85) 0%, rgba(128,219,255,0) 100%);
}

.reflect-x {
  transform         : scaleX(-1);
  -webkit-transform : scaleX(-1);
  -moz-transform    : scaleX(-1);
  -o-transform      : scaleX(-1);
  -ms-transform     : scaleX(-1);
}

.token.atrule {
  color       : #d73a49;
  font-weight : 600;
}

.token.boolean {
  color       : #d73a49;
  font-weight : 600;
}

.token.builtin {
  color : #6f42c1;
}

.token.class-name {
  color : #6f42c1;
}

.token.comment {
  color : #6a737d;
}

.token.constant {
  color       : #d73a49;
  font-weight : 600;
}

.token.directive {
  color : #643820;
}

.token.directive-name {
  color : #643820;
}

.token.function {
  color : #005cc5;
}

.token.keyword {
  color       : #d73a49;
  font-weight : 600;
}

.token.number {
  color : #a963ff;
}

.token.other-directive {
  color       : #d73a49;
  font-weight : 600;
}

.token.string {
  color : #032f62;
}

.token.placeholder-open, .placeholder-close {
  display : none;
}

.token.placeholder {
  background-color           : #a8a8a8;
  border-top-left-radius     : 6px;
  border-top-right-radius    : 6px;
  border-bottom-right-radius : 6px;
  border-bottom-left-radius  : 6px;
  color                      : #fff;
  margin-top                 : -2px;
  margin-bottom              : -2px;
  margin-right               : -2px;
  margin-left                : -2px;
  padding-top                : 2px;
  padding-bottom             : 2px;
  padding-right              : 2px;
  padding-left               : 2px;
}

.token.code-fold {
  background-color           : #a8a8a8;
  border-top-left-radius     : 6px;
  border-top-right-radius    : 6px;
  border-bottom-right-radius : 6px;
  border-bottom-left-radius  : 6px;
  color                      : #fff;
  margin-top                 : -2px;
  margin-bottom              : -2px;
  margin-right               : -2px;
  margin-left                : -2px;
  padding-top                : 2px;
  padding-bottom             : 2px;
  padding-right              : 2px;
  padding-left               : 2px;
}

@media only screen and (min-width: 832px) {

html {
  font-size : 16px;
}

}
@media only screen and (max-width: 831px) {

.hero-logo {
  max-width : 260px;
}

}
